 <script setup>
    import {ref} from 'vue'
    //标签控制
    //1. 标签是否显示 v-if = "比较式 true 所在的标签显示 | 反之不显示"
    //               v-else 必须挨着v-if v-if=false v-else显示
    let name = ref("root") //登录账号
    //3. 标签循环显示
    //   标签 v-for= "item in 数组数据" 当前标签的属性: 或者子标签内显示
    //   标签 v-for= "(item , index 遍历的下标 从0开始 )in 数组数据" 当前标签的属性: 或者子标签内显示
    let stars = ["小井老师","小泽老师","小丽ya老师","大圣老师"]

 </script>
 
 <template>
   <div>
        <div v-if="name == null || typeof name == 'undefined'">您还没有账号,免费注册!</div>
        <!-- <div v-if="name != null || typeof name != 'undefined'">个人信息 | 在线客服</div> -->
        <div v-else>个人信息 | 在线客服</div>
        <button @click="name=null">退出登录</button>

        <div v-show="name == null || typeof name == 'undefined'">您还没有账号,免费注册!</div>

        <hr>
        <ul>
            <li v-for="item in stars"  :id="item">{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,i) in stars"  :id="item"> {{i+1}} : {{ item}}</li>
        </ul>

   </div>
 </template>
 
 <style scoped>
 
 </style>
